{% from 'macros/icon.njk' import icon with context %}

<top-nav role="banner" class="display-block hairline-bottom" data-side-nav-inert>
  <a href="#main-content" class="color-primary visually-hidden skip-link">{{ 'i18n.common.skip_to_content' | i18n(locale) }}</a>

  <nav class="display-grid align-center" aria-label="{{ 'i18n.common.chrome_developers' | i18n(locale) }}" role="search">
    {# Hamburger button #}
    <button class="top-nav__hamburger button display-flex lg:display-none align-center justify-content-center width-700 height-700" aria-label="{{ 'i18n.common.menu' | i18n(locale) }}">
      {{ icon('hamburger', {label: 'menu'}) }}
    </button>

    {# Logo #}
    <div class="top-nav__logo display-flex justify-content-start">
      <a class="display-inline-flex" href="/" aria-label="developer.chrome.com">
        {{ icon('logo', {hidden: true}) }}
        <div class="top-nav__text">
          {{ icon('logo-lockup', {hidden: true}) }}
        </div>
      </a>
    </div>

    {# Search #}
    <search-box
      class="display-grid align-center"
      locale="{{locale}}"
      buttonLabel="{{ 'i18n.common.open_search' | i18n(locale) }}"
      docsLabel="{{ 'i18n.common.documentation' | i18n(locale) }}"
      blogLabel="{{ 'i18n.common.blog' | i18n(locale) }}"
      placeholder="{{'i18n.common.search_placeholder' | i18n(locale)}}"
    ></search-box>
  </nav>
</top-nav>
